import userEvent from '@testing-library/user-event'
import React, { useEffect, useState } from 'react'
import { Button, Space, Toast } from 'antd-mobile'
import './index.css'
//
import axios from 'axios'
//
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import hezu from '../../public/img/hezu.png'
import zhengzu from "../../public/img/zhengzu.png"
import dingwei from "../../public/img/dingwei.png"
import chuzu from "../../public/img/quchuzu.png"
export default function Index() {
  const [colors, setColor] = useState([])
  const [swiperList, setswiperList] = useState([])
  const [navBar, setNavBar] =useState([])
  useEffect(() => {
    axios.get('/home/swiper').then(res => {
      console.log(res)
      let { data } = res
      console.log(data)
      setswiperList(data.body)
      console.log("swiperList",swiperList)
    })
  }, [])
  useEffect(()=>{
    setNavBar([
      {
        id:1,
        title:"整租",
        ico:zhengzu,
        path:'/home/list'
      },
      {
        id:2,
        title:"出租",
        ico:chuzu,
        path:'/home/list'
      },
      {
        id:3,
        title:"定位",
        ico:dingwei,
        path:'/home/list'
      },
      {
        id:4,
        title:"合租",
        ico:hezu,
        path:'/home/list'
      }
    ])
  },[])
  return (
    <div>
      <div className='new swiperFather'>
        <Swiper
          spaceBetween={50}
          slidesPerView={3}
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
        >
          {

            swiperList.length > 0 && swiperList.map((item, index) => {
              return <SwiperSlide key={item.id}>
                <img className='swiperImg' src={`http:localhost:8080${item.imgSrc}`}></img>
              </SwiperSlide>
            })
          }
        </Swiper>
      </div>
      <div className='navBar'>
          {
            navBar.map((item)=>{
              return <ul>
                <li>
                  <img src={item.ico}></img>
                </li>
                <li>{item.title}</li>
              </ul>
            })
          }
      </div>
    </div>
  )
}
